<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <el-row type="flex" justify="space-between">
          <el-row><span>关联订单信息</span></el-row>
        </el-row>
      </div>
      <el-row :gutter="20" class="cardStyle">
        <el-col :span="6" v-for="(item, idx) of data" :key="idx">
          <el-card shadow="never">
            <el-row type="flex" justify="center" align="middle">
              <el-row>
                <el-row type="flex" justify="center">
                  <span class="fontStyle">{{ item.name }}</span>
                </el-row>
                <el-row type="flex" justify="center">
                  <span class="numberStyle">{{ item.num }}</span>
                </el-row>
              </el-row>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
      <el-row class="mr_vertical_10">
        <el-table :data="tableData" border height="580px">
          <el-table-column prop="offer_no" label="订单号" min-width="150">
          </el-table-column>
          <el-table-column label="交易方式" min-width="150">
            <template slot-scope="scope">
              <span v-if="scope.row.type == 'p2p'">自由交易</span>
              <span v-else-if="scope.row.type == 'central'">集中交易</span>
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量（度）" min-width="100">
          </el-table-column>
          <el-table-column prop="price" label="价格（元）">
            <template slot-scope="scope">
              <span>{{$coinToYuan(scope.row.price)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <span>{{scope.row.status === 'done' ? '已完成' : scope.row.status === 'need_verify' ? '待确认' : '已取消'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="交易时间">
            <template slot-scope="scope">
              <span>{{ scope.row.show_time }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="txid"
            label="区块链交易ID"
            min-width="180"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="handleCancle(scope.row)"
                >取消</el-button
              >
              <el-button type="text" size="small" @click="handleView(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>
    <el-row type="flex" justify="end">
      <Page
        @handleSizeChange="handleSizeChange"
        @handlePageChanged="handlePageChanged"
        :page.sync="pageNo"
        :pageView.sync="pageSize"
        :totalElements.sync="total"
      />
    </el-row>

    <el-dialog
      :title="dlgTitle"
      :visible.sync="dlgVib"
      @closed="closeDlg"
      append-to-body
      :width="width"
    >
      <component
        ref="dlgCpt"
        :is="dlgCpt"
        :data="dlgData"
        :type="dlgCptType"
        :action="action"
        :categoryType="categoryType"
        :choice="action == 'search'"
        :selected="selected"
        @selected="selectedf"
        @close="dlgVib = false"
        @locale="locale"
        @refresh="init"
      />
    </el-dialog>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";
import Purchase from "./purchase.vue";
import Page from "@/components/page.vue";
@Component({
  components: {
    Page,
    Purchase,
  },
})
export default class MyApplication extends Vue {
  @Prop()
  protected detailData!: any;
  // protected detailData: any = {
  //   order_stat: null,
  // };
  // for diog
  protected dlgVib: boolean = false;
  protected dlgTitle: string = "";
  protected dlgCpt: any = null;
  protected width: any = "";
  protected data: any = [
    { name: "交易次数(次)", num: 0 },
    { name: "平均价格(元)", num: 0 },
    { name: "交易数量(度)", num: 0 },
    { name: "交易总额(元)", num: 0 },
  ];
  protected tableData: any = [];
  protected total: number = 0;
  protected pageNo: number = 1;
  protected pageSize: number = 10;

  @Watch("detailData", { immediate: true, deep: true })
  protected async setData() {
    if (this.detailData.order_stat) {
      this.$set(this.data[0], "num", this.detailData.order_stat.order_qty);
      this.$set(this.data[1], "num", Vue.prototype.$coinToYuan(this.detailData.order_stat.avg_price));
      this.$set(this.data[2], "num", this.detailData.order_stat.total_qty);
      this.$set(this.data[3], "num", Vue.prototype.$coinToYuan(this.detailData.order_stat.total_amt));
    }
    this.init();
  }

  protected handlePageChanged(val: number) {
    this.pageNo = val;
    this.init();
  }
  protected handleSizeChange(val: number) {
    this.pageSize = val;
    this.pageNo = 1;
    this.init();
  }

  protected async init() {
    const params: any = {
      page_no: this.pageNo,
      page_size: this.pageSize,
      offer_no: this.$route.query.offer_no,
    };
    await this.$api.getOrdersQuery(params).then((response: any) => {
      const {
        data: {
          Orders,
          paginator: { page_size, page_no, total_count },
        },
      } = response;
      if (Orders.length) {
        Orders.forEach((el: any) => {
          const time = "show_time";
          const price = "show_price";
          el[time] = Vue.prototype.$fmtDate(el.created_at);
          el[price] = Vue.prototype.$coinToYuan(el.price);
        });
      }
      this.tableData = Orders;
      this.pageNo = page_no;
      this.pageSize = page_size;
      this.total = total_count;
    });
  }
  protected handleView(row: any) {
    this.$router.push({ path: "/orderDetail", query: row });
  }
  protected async handleCancle(row: any) {
    const params: any = {
      order_no: row.order_no,
    };

    await this.$confirm("确认取消", "取消提醒", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    });

    this.$api
      .cancelOrder(params)
      .then(() => {
        this.$message.success("已取消");
        this.init();
      })
      .catch(() => {
        this.$message({
          message: "取消失败",
          type: "info",
        });
      });
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
.cardStyle {
  .el-card {
    background: rgba(7, 123, 232, 0.05);
    .fontStyle {
      color: #077be8;
      font-size: 16px;
      line-height: 36px;
    }
    .numberStyle {
      font-size: 24px;
      margin-top: 10px;
    }
  }
}
</style>


